<template>
	<view>
		<view class="toolbar">
			<button size="mini" type="primary" @click="onSelfRecommend">自荐</button>
		</view>
		<uni-search-bar v-model="searchStr" @confirm="onSearch" @input="" />
		<uni-list>
			<uni-list-item v-for="item of list" :key="item.id" :title="item.plannerName" :note="item.plannerBrief" :thumb="item.plannerPhoto" link :to="`/pages/financialPlanner/detail?id=${item.id}`">
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="status" :contentText="CONTENT_TEXT" @clickLoadMore="loadMore"></uni-load-more>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { fetchPlannerList } from '../../api/planner.js'
import { CONTENT_TEXT, PAGE_SIZE } from '../../utils/constant.js'

const searchStr = ref('')
const status = ref('more')
const currentPage = ref(1)
const list = ref([])

const loadData = async () => {
	const { success, data } = await fetchPlannerList({
		pageNum: currentPage.value,
		pageSize: PAGE_SIZE,
		plannerName: searchStr.value
	})
	return data
}

const onSearch = async () => {
	currentPage.value = 1
	status.value = 'loading'
	const data = await loadData()
	if (data.length > 0) {
		list.value = data
		status.value = 'more'
	} else {
		list.value = []
		status.value = 'noMore'
	}
}

const loadMore = async () => {
	if (status.value !== 'more') return
	currentPage.value += 1
	status.value = 'loading'
	const data = await loadData()
	if (data.length > 0) {
		list.value = [...list.value, ...data]
		status.value = 'more'
	} else {
		status.value = 'noMore'
	}
	
}

const onSelfRecommend = () => {
	uni.navigateTo({
		url: '/pages/financialPlanner/registerPlanner'
	})
}

onMounted(() => {
	onSearch()
})
</script>

<style scoped lang="scss">
.toolbar {
	margin-top: .2rem;
	margin-right: .2rem;
	text-align: right;
}
</style>
